<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子容器在主轴上如何伸缩</title>
    <style>
        /*一旦子容器设置   flex: 1; 属性后宽度将无作用 跟Android的线性布局权重相似*/
        .dad {
            background: grey;
            height: 600px;
            display: flex;
         /*   flex-direction: row;*/   /*默认属性 沿X*/
            /*   flex-direction: column;*/   /*默认行属性 沿Y*/
        }

        .son1 {
            flex: 1;
            background:blue;
       /*     width: 120px;*/
            height: 80px;
        }
        .son2 {
            flex: 2;
            background:green;
       /*     width: 80px;*/
            height: 80px;
        }
        .son3 {
            flex: 1;
            background:orange;
         /*   width: 100px;*/
            height: 80px;
        }
    </style>
</head>
<body>
<div class="dad">
    <div class="son1">
        儿子1
    </div>

    <div class="son2">
        儿子1
    </div>
    <div class="son3">
        儿子3
    </div>
</div>
</body>
</html>